<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
// import echarts from 'echarts'
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "200px",
    },
    height: {
      type: String,
      default: "200px",
    },
    minchartData: {
      type: Array,
      default: () => [],
    },
    // minchartData: {
    //   type: Object,
    //   default() {
    //     return {};
    //   },
    // },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    minchartData: {
      handler: function () {
        console.log(JSON.stringify(this.minchartData));
        const data = [];
        this.minchartData.forEach(function (item) {
          data.push(
            item.inventoryAmount0,
            item.inventoryAmount30,
            item.inventoryAmount60,
            item.inventoryAmount90,
            item.inventoryAmount120,
            item.inventoryAmount150,
            item.inventoryAmount180,
            item.inventoryAmount240,
            item.inventoryAmount300,
            item.inventoryAmount1Y,
            item.inventoryAmount2Y,
            item.inventoryAmount3Y
          );
        });
        this.initChart(data);
      },
      deep: true,
    },
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart(data) {
      this.chart = echarts.init(document.getElementById(this.id));

      // this.chart.setOption({
      //   backgroundColor: "#344b58",
      //   title: {
      //     // text: "尺码库销比",
      //     x: "20",
      //     top: "20",
      //     textStyle: {
      //       color: "#fff",
      //       fontSize: "22",
      //     },
      //     subtextStyle: {
      //       color: "#90979c",
      //       fontSize: "16",
      //     },
      //   },
      //   tooltip: {
      //     trigger: "axis",
      //     axisPointer: {
      //       textStyle: {
      //         color: "#fff",
      //       },
      //     },
      //   },
      //   grid: {
      //     left: "5%",
      //     right: "5%",
      //     borderWidth: 0,
      //     top: 150,
      //     // bottom: 95,
      //     textStyle: {
      //       color: "#fff",
      //     },
      //   },
      //   legend: {
      //     // x: "5%",
      //     top: "10%",
      //     textStyle: {
      //       color: "#90979c",
      //     },
      //     data: ["销售目标", "销售额", "达成率"],
      //   },
      //   calculable: true,
      //   xAxis: [
      //     {
      //       type: "category",
      //       axisLine: {
      //         lineStyle: {
      //           color: "#90979c",
      //         },
      //       },
      //       splitLine: {
      //         show: false,
      //       },
      //       axisTick: {
      //         show: false,
      //       },
      //       splitArea: {
      //         show: false,
      //       },
      //       axisLabel: {
      //         interval: 0,
      //       },
      //       data: this.minchartData.xData,
      //     },
      //   ],
      //   yAxis: [
      //     {
      //       type: "value",
      //       position: "left",
      //       splitLine: {
      //         show: false,
      //       },
      //       // axisLine: {
      //       //   lineStyle: {
      //       //     color: "#90979c",
      //       //   },
      //       // },
      //       axisTick: {
      //         show: false,
      //       },
      //       axisLabel: {
      //         interval: 0,
      //       },
      //       splitArea: {
      //         show: false,
      //       },
      //     },
      //     {
      //       type: "value",
      //       name: "达成率",
      //       position: "right",
      //       alignTicks: true,
      //       axisLine: {
      //         show: true,
      //         lineStyle: {
      //           color: "#90979c",
      //         },
      //       },
      //       axisLabel: {
      //         formatter: "{value} %",
      //       },
      //     },
      //   ],

      //   series: [
      //     {
      //       name: "销售目标",
      //       type: "bar",
      //       barWidth: 15,
      //       // yAxisIndex: 1,
      //       yAxisIndex: 0,
      //       color: "#a9a3e5",
      //       data: this.minchartData.female,
      //     },
      //     {
      //       name: "销售额",
      //       type: "bar",
      //       barWidth: 15,
      //       // yAxisIndex: 1,
      //       yAxisIndex: 0,

      //       color: "#2c8bc5",
      //       data: this.minchartData.male,
      //     },
      //     {
      //       name: "达成率",
      //       type: "line",
      //       color: "#eab263",
      //       // yAxisIndex: 0,
      //       yAxisIndex: 1,
      //       data: this.minchartData.average,
      //     },

      //   ],
      // });
      this.chart.setOption({
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(255,255,255,0.1)",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
              backgroundColor: "#7B7DDC",
            },
          },
        },
        legend: {
          data: ["库存价值"],
          textStyle: {
            color: "#B4B4B4",
          },
          top: "0%",
        },
        grid: {
          x: "8%",
          width: "88%",
          y: "4%",
        },
        xAxis: {
          data: [
            "0~30天",
            "31~60天",
            "61~90天",
            "91~120天",
            "121~150天",
            "151~180天",
            "181~240天",
            "241~300天",
            "300~365天",
            "1~2年",
            "2~3年",
            "3年以上",
          ],
          boundaryGap: false,
          axisLabel: {
            interval: 0, //代表显示所有x轴标签显示
            // rotate: 45, //代表逆时针旋转45度
          },
          axisLine: {
            lineStyle: {
              color: "#B4B4B4",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },

            axisLabel: {
              formatter: "{value} ",
            },
          },
          {
            // name: "Temperature",
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },
            axisLabel: {
              formatter: "{value} %",
            },
          },
        ],
        series: [
          // {
          //   name: "达成率",
          //   type: "line",
          //   smooth: true,
          //   showAllSymbol: true,
          //   symbol: "emptyCircle",
          //   symbolSize: 8,
          //   yAxisIndex: 1,
          //   // itemStyle: {
          //   //   normal: {
          //   //     color: "#F02FC2",
          //   //   },
          //   // },
          //   tooltip: {
          //     valueFormatter: function (value) {
          //       return value + " %";
          //     },
          //   },
          //   data: this.minchartData.average,
          // },
          {
            name: "库存价值",
            type: "line", // 指定为折线图
            areaStyle: {}, // 开启面积图
            // itemStyle: {
            //   normal: {
            //     barBorderRadius: 5,
            //   },
            // },
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: data,
          },
          // {
          //   name: "销售额",
          //   type: "bar",
          //   // barGap: "-100%",
          //   barWidth: 20,
          //   tooltip: {
          //     valueFormatter: function (value) {
          //       return value + " 万";
          //     },
          //   },
          //   // itemStyle: {
          //   //   normal: {
          //   //     barBorderRadius: 5,
          //   //   },
          //   // },
          //   z: -12,
          //   data: this.minchartData.male,
          // },
        ],
      });
      this.chart.on("click", this.handleClick);
    },
    handleClick(params) {
      // this.$emit("SetLineChartData", params.dataIndex);
    },
  },
};
</script>
